<template>
  <div style="text-align: left; margin-left: 38px">


    <label for="addToDo">Add a todo</label>
    <input id="addToDo" type="text" v-model="newToDoText">
    <button @click="addToDo">Add</button>

    <!--todo列表-->
    <to-do v-bind:todos="todos" @removeToDo="removeToDoByIndex"></to-do>

    <!--切割线-->
    <horizon-line></horizon-line>

    <!-- 这个例子证明了data必须是一个函数， 因为变量的域。如果是对象就容易变成点击一个按钮都变了 -->
    <button-count></button-count>
    <button-count></button-count>
    <button-count></button-count>

    <horizon-line></horizon-line>
    <alert-box>something is wrong</alert-box>
  </div>

</template>
<script>
  import ToDo from '../../components/Todo'
  import ButtonCount from '../../components/buttonCount'
  import AlertBox from "../../components/alertBox";

  export default {
    components: {
      AlertBox,
      ToDo,
      ButtonCount,
      // HorizonLine
    },
    data() {
      return {
        todos: [
          {
            id: 1,
            title: '吃饭'
          },
          {
            id: 2,
            title: '第二项'
          }
        ],
        newToDoText: '',
        newToDoId: 3,
        testvalue2: ''
      }
    },
    methods: {
      addToDo: function () {
        this.todos.push(
          {
            id: this.newToDoId++,
            title: this.newToDoText
          }
        );
        this.newToDoText = ''
      },

      removeToDoByIndex: function (index) {
        this.todos.splice(index, 1);
      }
    }
  }
</script>

<style scoped>

</style>
